<script>
export default {
  data() {
    return {
      energyListDialog: true,
      selectedEnergyId: -1,
      selectedShowType: 'stand',
      selectedEnergy: {
        list: [],
        energy: {
          id: -1
        },
        showType: 'stand',
        standUnite: 'kgce',
        cashUnite: '元'
      },
      energyInfo: {
        list: []
      }
    }
  },
  mounted() {
    this.getEnergyList()
  },
  methods: {
    selectEnergyInfo: function (type, value) {
      if (type === 1) {
        this.selectedEnergy.energy = value
        this.selectedEnergyId = value.id
        const showType = this.selectedEnergy.showType;
        if (value.id === -1 && showType === 'real') {
          this.selectedEnergy.showType = 'stand'
        }
      }
      if (type === 2) {
        this.selectedEnergy.showType = value
        this.selectedShowType = value;
      }
    },
    getEnergyList: function () {
      const data = {content: {}}
      this.$axios({url:'/ems/client/index/energy/list',data: data}).then((content) => {
        this.energyInfo.list = content.list
        this.selectedEnergy.list = content.list
      });
    },
  },
  components: {
    BasicInfo: () => import("@/components/info-scan/modules/basic-info.vue"),
    EnergyMap: () => import("@/components/info-scan/modules/energy-map.vue"),
    EnergySummarize: () => import("@/components/info-scan/modules/energy-summarize.vue"),
    EnergyCalendar: () => import("@/components/info-scan/modules/energy-calendar.vue"),
    EnergyCompare: () => import("@/components/info-scan/modules/energy-compare.vue"),
    ItemCompare: () => import("@/components/info-scan/modules/item-compare.vue"),
    EnergyOnlineWatch: () => import("@/components/info-scan/modules/energy-oline-watch.vue"),
    EnergyYearTrend: () => import("@/components/info-scan/modules/energy-year-trend.vue"),
    EnergySameAroundCompare: () => import("@/components/info-scan/modules/energy-same-around-compare.vue")
  }
}
</script>

<template>
  <div>
    <el-row><el-col :span="8"><BasicInfo/></el-col><el-col :span="16"><EnergyMap :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy"/></el-col></el-row>
    <el-row>
      <el-col :span="12"><EnergyCalendar :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="24"><EnergyOnlineWatch :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><EnergyCompare :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
          <el-col :span="12"><ItemCompare :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="margin-top: 1px;">
      <el-col :span="8"><EnergySummarize :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
      <el-col :span="16"><EnergySameAroundCompare :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
    </el-row>
    <el-row style="margin-top: 1px;">
      <el-col :span="24"><EnergyYearTrend :selectedEnergyId="selectedEnergyId" :selectedEnergy="selectedEnergy" :selectedShowType="selectedShowType"/></el-col>
    </el-row>
    <div id="energy-list-item" :style="energyListDialog ? 'width: 100px':'width: 30px'" style="position: fixed;float: right;right: 10px;top: 150px;background-color: rgba(255, 255, 255, 0.7);border-radius: 10px 0 0 10px;border: 1px solid gray;">
      <div style="height: 30px;width: 90%;font-size: 25px;line-height: 30px;text-align: left;margin-left: 5%;cursor: pointer">
        <i :class="energyListDialog ? 'el-icon-s-unfold':'el-icon-s-fold'" v-on:click="energyListDialog = !energyListDialog"/>
      </div>
      <div :style="energyListDialog ? 'display:block':'display:none'">
        <div v-on:click="selectEnergyInfo(1, {id:-1})" :class="selectedEnergy.energy.id===-1 ? 'selected': ''" style="height: 30px;width: 90%;font-size: 15px;line-height: 30px;text-align: left;margin-left: 10%;cursor: pointer" class="item">
          <i class="el-icon-aim"/>&nbsp;&nbsp;所有&nbsp;&nbsp;
        </div>
        <div v-on:click="selectEnergyInfo(1, item)" :class="selectedEnergy.energy.id === item.id ? 'selected': ''" v-for="(item, index) in energyInfo.list" :key="index" style="height: 30px;width: 90%;font-size: 15px;line-height: 30px;text-align: left;margin-left: 10%;cursor: pointer" class="item">
          <i class="el-icon-aim"/>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;({{ item.unite }})
        </div>
        <div style="border-top: 1px solid rgba(0, 0, 0, 0.2);margin-top: 10px;line-height: 30px;font-size: 14px;text-align: left;margin-left: 5%;">
          <div>展示单位：</div>
          <div v-on:click="selectEnergyInfo(2, 'real')" v-if="selectedEnergy.energy.id !== -1" :class="selectedEnergy.showType === 'real' ? 'selected': ''" style="cursor:pointer;width: 90px;padding-left: 5px;border-radius: 5px;margin-top: 5px;" class="item">能源单位</div>
          <div v-on:click="selectEnergyInfo(2, 'stand')" :class="selectedEnergy.showType === 'stand' ? 'selected': ''" style="cursor:pointer;width: 90px;padding-left: 5px;border-radius: 5px;margin-top: 5px;" class="item">标准煤(kgce)</div>
         <!-- <div v-on:click="selectEnergyInfo(2, 'cash')" :class="selectedEnergy.showType === 'cash' ? 'selected': ''" style="cursor:pointer;width: 70px;padding-left: 5px;border-radius: 5px;margin-top: 5px;margin-bottom: 5px;" class="item">货币（元）</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.el-calendar-table .el-calendar-day {
  /* 此处的288是用总高度 - 顶部一个时间选择器高度 - 星期几的高度 - tr中的border */
  height: 400px;
  padding: 0;
  color: #fff;
}
#energy-list-item .item:hover {
  background-color: rgba(113, 204, 255, 0.4);
}
#energy-list-item .selected {
  background-color: rgba(113, 204, 255, 0.4);
}
</style>
